<ControlGroup type="select" width="{width}" valign="middle" inline="{true}" label="{label}" disabled="{disabled}">
    <div class="btn-group svelte-l5q6v5">
        {#each options as option}
        <BaseToggleButton notoggle="1" on:select="select(option)" value="{value === option.value}">
            {#if option.label}
            <span>{@html option.label}</span>
            {/if} {#if option.svg}
            <svg height="16" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd">
                <path
                    class="{option.stroke? 'stroke' : ''} {option.crisp? 'crisp' : ''} {value === option.value ? 'selected' : ''}"
                    style="stroke-width: {option.stroke || 0}"
                    d="{option.svg}"
                />
            </svg>
            {/if}
        </BaseToggleButton>
        {/each}
    </div>
</ControlGroup>

<script>
    import ControlGroup from './ControlGroup.html';
    import BaseToggleButton from './BaseToggleButton.html';

    export default {
        components: { ControlGroup, BaseToggleButton },
        data() {
            return {
                disabled: false,
                width: 'auto',
                value: 'red',
                options: [],
                optgroups: []
            };
        },
        methods: {
            select(option) {
                this.set({ value: option.value });
            }
        }
    };
</script>

<style>
    svg {
        vertical-align: text-top;
        margin: 0 3px;
    }
    path {
        fill: #222;
    }
    path.stroke {
        fill: none;
        stroke: #222;
    }
    path.selected {
        fill: white;
    }
    path.stroke.selected {
        stroke: white;
        fill: none;
    }
    path.crisp {
        shape-rendering: crispEdges;
    }
</style>
